<template>
  <div class="time">
    <el-tag style="display: inline-block;vertical-align: top;">{{tag}}</el-tag>
    <el-date-picker
      type="daterange"
      size="small"
      v-model="timeChange"
      :editable="false"
      range-separator="~"
      value-format="yyyy-MM-dd"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :style="{'margin-left':'-7px','width':width}"
      @change="getValue()"
      :picker-options="pickerOptions"
      :clearable="false"
    ></el-date-picker>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  props: ["dataTime", "width","tag"],
  data() {
    const weekday = new Date().getDay(); //获取今天是周几
    const monthday = new Date().getDate(); //获取今天是几号
    const startLastMon = moment()
      .month(moment().month() - 1)
      .startOf("month")
      .valueOf();
    const endLastMon = moment()
      .month(moment().month() - 1)
      .endOf("month")
      .valueOf();
    const startLastWeek = moment().day(-6).format();
    const endLastWeek = moment().day(0).format();
    const startWeek = moment().day(1).format();
    const endWeek = moment().day(7).format();
    // console.log(endWeek, "记号");
    let startMon = moment()
      .month(moment().month())
      .startOf("month")
      .valueOf();
    let endMon = moment()
      .month(moment().month())
      .endOf("month")
      .valueOf();
    // .month(moment().month())
    // .endOf((monthday-1).toString())
    // .valueOf();
    // console.log("startMon,endMon",moment(startMon).format(), endMon)
    const pickers = {
      currentWeek: {
        text: "本周",
        onClick(picker) {
          picker.$emit("pick", [startWeek, endWeek]);
        }
      },
      lastWeek: {
        text: "上周",
        onClick(picker) {
          picker.$emit("pick", [startLastWeek, endLastWeek]);
        }
      },
      currentMonth: {
        text: "本月",
        onClick(picker) {
          picker.$emit("pick", [moment(startMon).format("YYYY-MM-DD"), moment(endMon).format("YYYY-MM-DD")]);
        }
      },
      lastMonth: {
        text: "上月",
        onClick(picker) {
          picker.$emit("pick", [moment(startLastMon).format("YYYY-MM-DD"), moment(endLastMon).format("YYYY-MM-DD")]);
        }
      }
    };
    let shortcuts = [];
    shortcuts.push(pickers.currentWeek, pickers.lastWeek, pickers.currentMonth, pickers.lastMonth);
    // shortcuts.push(pickers.lastMonth, pickers.currentMonth);
    return {
      timeChange: this.dataTime.length > 0 ? this.dataTime : [], //改变dateTime的值，会报警告，这里重新定义变量赋值   this.dataTime.length > 0 ? this.dataTime : [startMon, endMon]
      pickerOptions: {
        shortcuts
      }
    };
  },
  watch: {
      //监听传过来的值，随时赋值
    dataTime(val) {
      if(val==null){
        this.timeChange = [];
      }else{
        this.timeChange = val.length>0?[val[0], val[1]]:[];
      }
    }
  },
  mounted() {
    this.getValue();
  },
  methods: {
    getValue() {
      this.$emit("timeClick", this.timeChange);
    }
  }
};
</script>
<style lang="scss" scoped>
.time{
  margin-right: 20px;
}
.el-tag {
  background: #ffffff;
  border: 1px solid #dcdfe6;
}
</style>

